@use '../modules' as *;

%scale_trough {
  border-radius: $button_radius;
  background-color: $trough_color;

  &:disabled { background-color: gtkalpha($trough_color, $disabled_opacity); }

  // ...on selected list rows
  row:selected & { &:disabled, & { border-color: $selected_borders_color; }}

  // OSD
  .osd & {
    border-color: $osd_borders_color;
    background-color: transparentize($osd_borders_color, 0.2);

    &:disabled { background-color: $osd_disabled_bg_color; }
  }
}

%scale_highlight {
  border-radius: $button_radius;
  background-color: $accent_bg_color;
  color: $accent_fg_color;

  &:disabled {
    background-color: gtkmix($accent_bg_color, $view_bg_color, 50%);
    border-color: transparent;
  }

  // ...on selected list rows
  row:selected & { &:disabled, & { border-color: $selected_borders_color; }}

  // OSD
  .osd & {
    border-color: $osd_borders_color;

    &:disabled { border-color: transparent; }
  }
}

scale {
  // sizing
  $_marks_length: 6px;
  $_marks_distance: 6px;

  min-height: 10px;
  min-width: 10px;
  padding: 12px;

  // those are inside the trough node, I need them to show their own border over the trough one, so negative margin
  //fill,
  //highlight { margin: -1px; }

  // the slider is inside the trough, so to have make it bigger there's a negative margin

  slider {
    min-height: 18px;
    min-width: 18px;
    margin: -9px;
  }

  // click-and-hold the slider to activate
  &.fine-tune {
    &.horizontal {
      padding-top: 9px;
      padding-bottom: 9px;
      min-height: 16px;
    }

    &.vertical {
      padding-left: 9px;
      padding-right: 9px;
      min-width: 16px;
    }

    // to make the trough grow in fine-tune mode
    slider { margin: -6px; }

    fill,
    highlight,
    trough {
      border-radius: 5px;
      -gtk-outline-radius: 7px;
    }
  }

  // the backing bit
  trough {
    @extend %scale_trough;

    outline-offset: 2px;
    -gtk-outline-radius: 5px;
  }

  // Match trough size to libadwaita
  &.horizontal trough { min-height: 4px; }
  &.vertical trough { min-width: 4px; }

  // the colored part of the backing bit
  highlight { @extend %scale_highlight; }

  // this is another differently styled part of the backing bit, the most relevant use case is for example
  // in media player to indicate how much video stream as been cached
  fill {
    @extend %scale_trough;

    &:backdrop, & { background-color: $borders_color; }

    &:disabled {
      &:backdrop, & {
        border-color: transparent;
        background-color: transparent;
      }
    }

    // OSD
    .osd & {
      background-color: gtkmix($osd_fg_color, $osd_borders_color, 25%);

      &:disabled {
        &:backdrop, & {
          border-color: transparent;
          background-color: transparent;
        }
      }
    }
  }

  slider {
    background-color: $slider_color;
    
    // Trying to get this as close to libadwaita as possible. Only one outer box-shadow is allowed. Outlines are not supported.
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.25);
    border: 1px solid transparent; //darken($alt_borders_color, 3%);

    border-radius: 100%;
    transition: $button_transition;
    transition-property: background, border, box-shadow;

    &:hover { background-color: $slider_hover_color; }

    &:disabled {
      @include button(disabled);
      background-color: gtkmix($view_bg_color, $slider_color, 50%);
      box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    }

    &:backdrop {
      transition: $backdrop_transition;
      box-shadow: 0 1px 2px 1px rgba(0,0,0,0.15);

      //@include button(backdrop);

      &:disabled {
        box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
      }
    }

    // ...on selected list rows
    row:selected & { &:disabled, & { border-color: $selected_borders_color; } }

    // OSD
    .osd & {
      background-color: $slider_color;
      box-shadow: 0 1px 2px 1px rgba(0,0,0,0.25);
      border: 1px solid transparent;

      &:hover {
        background-color: $slider_hover_color;
      }

      &:disabled {
        @include button(disabled);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
      }

      &:backdrop {
        transition: $backdrop_transition;
        box-shadow: 0 1px 2px 1px rgba(0,0,0,0.2);

        &:disabled {
          box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
        }
      }
    }
  }

  marks,
  value {
    color: gtkalpha(currentColor, 0.55);
    font-feature-settings: "tnum";
  }

  //marks margins
  @each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
                                                                  (horizontal, bottom, bottom, top),
                                                                  (vertical, top, left, right),
                                                                  (vertical, bottom, right, left) {
    &.#{$scale_orient} marks {
      &.#{$marks_class} {
        margin-#{$marks_margin}: $_marks_distance;
        margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
      }
    }

    &.#{$scale_orient}.fine-tune marks {
      &.#{$marks_class} {
        margin-#{$marks_margin}: $_marks_distance;
        margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px);
      }
    }
  }

  &.horizontal {
    indicator {
      min-height: $_marks_length;
      min-width: 1px;
    }

    &.fine-tune indicator { min-height: ($_marks_length - 3px); }
  }

  &.vertical {
    indicator {
      min-height: 1px;
      min-width: $_marks_length;
    }

    &.fine-tune indicator { min-width: ($_marks_length - 3px); }
  }

  // *WARNING* scale with marks madness following

  // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
  $suffix: if($variant == 'light', '', '-dark');

  $directions: (
    'horizontal': 'horz',
    'vertical'  : 'vert'
  );

  $marks: (
    'scale-has-marks-above': 'marks-before:not(.marks-after)',
    'scale-has-marks-below': 'marks-after:not(.marks-before)'
  );

  $states: (
    '':                 '',
    ':hover':           '',
    ':disabled':        '-disabled',
    ':backdrop':        '-disabled',
    ':backdrop:disabled': '-disabled'
  );

  // Mixin for slider dimensions and margin adjustments
  @mixin slider-dimensions($dir, $mark) {
    // default background position
    $bg-pos: bottom;

    @if $dir == 'horizontal' {
      min-height: 28px;
      min-width: 23px;
      @if $mark == 'scale-has-marks-above' {
        margin-top: -14px;
        $bg-pos: top;
      } @else {
        margin-bottom: -14px;
      }
    } @else { // vertical
      min-height: 23px;
      min-width: 28px;
      @if $mark == 'scale-has-marks-above' {
        margin-left: -14px;
        $bg-pos: left bottom;
      } @else {
        margin-right: -14px;
        $bg-pos: right bottom;
      }
    }
    background-position: $bg-pos;
    background-repeat: no-repeat;
    box-shadow: none;
  }

  // Mixin for fine-tune slider margins
  @mixin fine-tune-margin($dir, $mark) {
    margin: -7px;
    @if $dir == 'horizontal' {
      @if $mark == 'scale-has-marks-above' {
        margin-top: -11px;
      } @else {
        margin-bottom: -11px;
      }
    } @else {
      @if $mark == 'scale-has-marks-above' {
        margin-left: -11px;
      } @else {
        margin-right: -11px;
      }
    }
  }

  // Now iterate over maps
  @each $dir_class, $dir_infix in $directions {
    @each $marks_infix, $marks_class in $marks {
      @each $state, $state_infix in $states {
        &.#{$dir_class}.#{$marks_class} {

          slider {
            &#{$state} {
              // Assemble asset path from variables
              $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
              // the base margin for the slider asset
              margin: -10px;
              border-style: none;
              border-radius: 0;
              background-color: transparent;
              background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));

              @if $variant == 'dark' {
                &:hover, &:active {
                  background-image: -gtk-scaled(
                    url('assets/slider-#{$dir_infix}-#{$marks_infix}.png'),
                    url('assets/slider-#{$dir_infix}-#{$marks_infix}@2.png')
                  );
                }
              }

              // Apply dimension adjustments via mixin
              @include slider-dimensions($dir_class, $marks_infix);
            }
          }

          // Fine-tune slider adjustments
          &.fine-tune slider {
            @include fine-tune-margin($dir_class, $marks_infix);
          }
        }
      }
    }
  }

  &.color {
    min-height: 0;
    min-width: 0;

    trough {
      background-image: image($borders_color);
      background-repeat: no-repeat;
    }

    &.horizontal {
      padding: 0 0 15px 0;

      trough {
        padding-bottom: 4px;
        background-position: 0 -3px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      slider {
        &:dir(ltr), &:dir(rtl) { // specificity bumb
          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
            margin-bottom: -15px;
            margin-top: 6px;
          }
        }
      }
    }

    &.vertical {
      &:dir(ltr) {
        padding: 0 0 0 15px;

        trough {
          padding-left: 4px;
          background-position: 3px 0;
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }

        slider {
          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
            margin-left: -15px;
            margin-right: 6px;
          }
        }
      }

      &:dir(rtl) {
        padding: 0 15px 0 0;

        trough {
          padding-right: 4px;
          background-position: -3px 0;
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }

        slider {
          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
            margin-right: -15px;
            margin-left: 6px;
          }
        }
      }
    }

    &.fine-tune {
      &.horizontal {
        &:dir(ltr), &:dir(rtl) { // specificity bump
          padding: 0 0 12px 0;

          trough {
            padding-bottom: 7px;
            background-position: 0 -6px;
          }

          slider {
            margin-bottom: -15px;
            margin-top: 6px;
          }
        }
      }

      &.vertical {
        &:dir(ltr) {
          padding: 0 0 0 12px;

          trough {
            padding-left: 7px;
            background-position: 6px 0;
          }

          slider {
            margin-left: -15px;
            margin-right: 6px;
          }
        }

        &:dir(rtl) {
          padding: 0 12px 0 0;

          trough {
            padding-right: 7px;
            background-position: -6px 0;
          }

          slider {
            margin-right: -15px;
            margin-left: 6px;
          }
        }
      }
    }
  }
}
